<template>
<div>
    <img src="@/assets/element-plus-logo.svg">
</div>
<div>
    <el-icon class="icon-user"><User /></el-icon>
     <el-dropdown  @command="handleCommand">
    <span class="el-dropdown-link">
      {{wms_store.nickName}}
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="a">个人中心</el-dropdown-item>
        <el-dropdown-item command="b">修改密码</el-dropdown-item>
        <el-dropdown-item command="c">退出登录</el-dropdown-item>
        
        <el-dropdown-item divided command="logOut">注销</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</div>
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { wmsStore } from '@/store/pinia'; 
import { useRoute,useRouter } from 'vue-router'

const wms_store = wmsStore();
const route = useRoute();  //获取当前路由相关信息
const router = useRouter(); // 1.获取路由表  2.负责页面跳转

const handleCommand = (command: string ) => {
  if(command == 'logOut') {
     ElMessageBox.confirm(
    '确认注销吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      wms_store.id =0;
      wms_store.token = '';
      wms_store.nickName = '';
      router.push({ name: "user-login" });
    })
    .catch(() => {
      
    })
  }
}
</script>

<style scoped>
img {
    width: 100px;
}

.icon-user {
    size: 21px;
    color: #fff;
    margin-right: 5px;
}

.el-dropdown-link{
    outline: none;
    color: #fff;
}
</style>